<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Example 7 (Generating a 2500 x 2500 grid)</title>
		
		<script>	
			window.onload = function () {
				var tileMap = [];

				var tile = {
					width: 32,
					height: 32
				}

				var grid = {
					width: 2500,
					height: 2500
				}

				var Keys = {
			    	UP: 38,
			    	DOWN: 40,
			    	LEFT: 37,
			    	RIGHT: 39
			    }

				var scroll = {
					x: 0,
					y: 0
				}

				var canvas = document.getElementById('myCanvas');
				var c = canvas.getContext('2d');

				window.addEventListener('keydown', handleKeyDown, false);

				initializeGrid();
				draw();

				function handleKeyDown(e) {
					switch (e.keyCode) {
						case Keys.UP:
							scroll.y -= ((scroll.y - tile.height) >= 0) ? tile.height : 0;
							break;
						case Keys.DOWN:
							scroll.y += tile.height;
							break;
						case Keys.LEFT:
							scroll.x -= ((scroll.x - tile.width) >= 0) ? tile.width : 0;
							break;
						case Keys.RIGHT:
							scroll.x += tile.width;
							break;
					}

					document.getElementById('scrollx').innerHTML = scroll.x;
					document.getElementById('scrolly').innerHTML = scroll.y;
				}

				function initializeGrid() {
					for (var i = 0; i < grid.width; i++) {
						tileMap[i] = [];
						for (var j = 0; j < grid.height; j++) {
							if ((i % 2) == 0 && (j % 2) == 0) {
								tileMap[i][j] = 0;
							} else {
								tileMap[i][j] = 1;
							}
						}
					}
				}

				function draw() {
					c.fillStyle = '#FFFFFF';
					c.fillRect (0, 0, canvas.width, canvas.height);
					c.fillStyle = '#000000';

					var startRow = Math.floor(scroll.x / tile.width);
					var startCol = Math.floor(scroll.y / tile.height);
					var rowCount = startRow + Math.floor(canvas.width / tile.width) + 1;
					var colCount = startCol + Math.floor(canvas.height / tile.height) + 1;

					for (var row = startRow; row < rowCount; row++) {
						for (var col = startCol; col < colCount; col++) {
							var tilePositionX = tile.width * row;
							var tilePositionY = tile.height * col;

							tilePositionX -= scroll.x;
							tilePositionY -= scroll.y;

							if (tileMap[row][col] == 0) {
								c.strokeRect(tilePositionX, tilePositionY, tile.width, tile.height);
							} else {
								c.fillRect(tilePositionX, tilePositionY, tile.width, tile.height);
							}

						}
					}

					setTimeout(draw, 1);
				}
			}
		</script>
    </head>
    <body>
		<canvas id="myCanvas" width="300" height="300"></canvas>
		<br />
		Use the UP, DOWN, LEFT and RIGHT keys to scroll
		<br />
		Scroll X: <span id="scrollx">0</span><br />
		Scroll Y: <span id="scrolly">0</span>
    </body>
</html>